<template>
    <view>
        <Header :background="background" returnIcon="black" />
        <view class="content" :style="{'min-height': `${noBarHeight}px`}">
            <img class="logo" src="../../../static/logo_blue.png" />
            <view class="title_black">
                <view
                    v-for="(item, index) in titleList"
                    :key="index"
                    :class="item.id == titleIndex ? 'title_select' : ''"
                    @click="titleSelect(item)"
                >
                    {{ item.label }}
                </view>
            </view>
            <view class="input_form">
                <input
                    class="input_black1"
                    v-model="username"
                    placeholder="请输入账号/手机号码"
                    placeholder-style="font-size: 28rpx; color: #E2E2E2"
                    type="text"
                />
                <input
                    class="input_black"
                    v-model="password"
                    placeholder="请输入密码"
                    placeholder-style="font-size: 28rpx; color: #E2E2E2"
                    type="password"
                />
            </view>
            <view class="login_btn" @click="onLogin">登录</view>
            <view class="tool_black">
                <text @click="onForget">
                    忘记密码
                </text>
                <view>
                    <span style="color: #a8a8a8">没有账号？</span>
                    <text @click="test">申请开通</text>
                </view>
            </view>
            <uni-popup ref="qrCode" type="center">
                <view class="qr_block">
                    <img class="qrcode" show-menu-by-longpress="true" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/poster/serviceQrCode.png" />
                    <view class="poster_over_text">码上申请开通</view>
                    <view class="poster_over_shallowText">扫描添加客服开通</view>
                </view>
            </uni-popup>
            <view class="check_login">
                <view style="color: #a8a8a8" class="tips">其他登录方式</view>
                <img class="wx_icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/wechat_icon@2x.png"/>
            </view>
            <view class="empower">
                <img v-if="!empowerStatus" @click="onEmpower" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/check_icon.png" style="width: 46rpx; height: 46rpx"/>
                <img v-else @click="onEmpower" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/inselect_icon.png" style="width: 56rpx; height: 56rpx"/>
                <view @click="lookPdf">
                    已阅
                    <span style="color: #5162FD">《用户协议》</span>和
                    <span style="color: #5162FD">《隐私政策》</span>
                </view>
            </view>
            <uni-popup ref="look" type="center">
                <view class="look_bg">
                    <view class="lookPdf">
                        {{ pdfText }}
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>
<script>

var app = getApp()
import Header from "@/components/Header.vue";
import { login } from '@/utils/api/user'
import { cityList } from '@/utils/api/common'

export default ({
    name: "login",
    data() {
        return {
            background: '#ffffff',
            noBarHeight: app.globalData.noBarHeight,
            titleIndex: 1,
            pdfText: "用户协用户协议议用户协议户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议用户协用户协议议用户协议用户协议用户协议用户协议",
            titleList: [
                {
                    id: 1,
                    label: '会员'
                },
                {
                    id: 2,
                    label: '企业'
                }
            ],
            username: '',
            password: '',
            empowerStatus: false,
        }
    },
    components: {
        Header
    },
    methods: {
        lookPdf() {
            console.log(111)
            this.$refs.look.open()
        },
        test() {
            this.$refs.qrCode.open()
        },
        // 登录
        onLogin() {
            if (!this.username) {
                uni.showToast({
                    title: '请输入账号',
                    icon: 'none'
                })
                return
            } else if (!this.password) {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                })
                return
            } else if (!this.empowerStatus) {
                uni.showToast({
                    title: '请确认用户协议/隐私政策',
                    icon: 'none'
                })
                return
            }
            const params = {
                username: this.username,
                password: this.password
            }
            login(params).then(res => {
                uni.setStorageSync('isLogin', 1)
                uni.setStorageSync('uid', res.data.uid)
                uni.setStorageSync('userInfo', JSON.stringify(res.data))
                uni.switchTab({
                    url: '../../../pages/project/project'
                })
            })
        },
        titleSelect(item) {
            if (this.titleIndex != item.id) {
                this.titleIndex = item.id
            }
        },
        onEmpower() {
            this.empowerStatus = !this.empowerStatus
        },
        onForget() {
            uni.navigateTo({
                url: '../resetPassword/resetPassword'
            })

        }
    }
})
</script>

<style scoped  lang="scss">
/**
    二维码弹窗
 */
.qr_block {
    width: 412rpx;
    height: 472rpx;
    padding: 45rpx;
    box-sizing: border-box;
    background: white;
    border-radius: 13rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    //margin-top: 250rpx;
    .qrcode {
        width: 280rpx;
        height: 280rpx;
    }
    .poster_over_text {
        width: 100%;
        height: 50rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #494949;
        line-height: 50rpx;
        letter-spacing: 3px;
        text-align: center;
    }
    .poster_over_shallowText {
        width: 100%;
        height: 33rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 33rpx;
        letter-spacing: 2px;
        text-align: center;
    }
}

.content {
    flex-direction: column;
    width: 100%;
    background: white;
    display: flex;
    padding: 50rpx 62rpx;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    .logo {
        width: 160rpx;
        height: 50rpx;
    }
    .title_black {
        width: 100%;
        height: 160rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .title_black > view {
        height: 46rpx;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        line-height: 45rpx;
        letter-spacing: 1px;
    }
    .title_select {
        color: #5464fd;
        border-bottom: 2rpx solid #5464fd;
    }
    .input_form {
        width: 100%;
        height: auto;
        border-radius: 10rpx;
        border: 2rpx solid #E2E2E2;
        .input_black {
            width: 100%;
            height: 100rpx;
            padding:0 25rpx;
            box-sizing: border-box;
        }
        .input_black1 {
            width: 100%;
            height: 100rpx;
            padding: 0 25rpx;
            box-sizing: border-box;
            border-bottom: 2rpx solid #E2E2E2
        }
    }
    .login_btn {
        width: 100%;
        height: 90rpx;
        background: linear-gradient(0, #5162FD, #8E4EF7);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40rpx;
        margin: 50rpx 0;
    }
    .tool_black {
        width: 100%;
        height: 40rpx;
        color: #5162FD;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .check_login {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .tips {
            margin-top: 154rpx;
            margin-bottom: 26rpx;
        }
        .wx_icon {
            width: 64rpx;
            height: 64rpx;
            margin-bottom: 200rpx;
        }
    }
    .empower {
        width: 100%;
        color: #9B9B9B;
        height: 46rpx;
        display: flex;
        align-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
    }
    .empower > view {
        line-height: 46rpx;
    }
    .look_bg {
        width: 600rpx;
        height: 800rpx;
        box-sizing: border-box;
        background: white;
        border-radius: 50rpx;
        padding: 40rpx;
    }
    .lookPdf {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        font-size: 24rpx;
        line-height: 40rpx;
    }
}
</style>
